<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.1/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui@2.13.1/lib/theme-chalk/index.css">
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
</head>
<body>
<script src="https://unpkg.zhimg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.zhimg.com/element-ui@2.13.1/lib/index.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<!-- ECharts -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<div id="app">
    <template>
        <!--        style="padding: 0 10% 0 10%;"-->
        <div class="list">
            <div class="filter">
                <el-form ref="filterForm" :model="params" :inline="true">
                    <el-form-item prop="key" label="KEY">
                        <el-input class="filter-input"
                                  placeholder="KEY"
                                  clearable
                                  v-model.trim="params.key"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="status" label="状态">
                        <el-select class="filter-select" v-model="params.status" placeholder="状态">
                            <el-option
                                    v-for="item in statusOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="filter-btns">
                    <el-button type="primary" @click="onSearch" size="small">查询</el-button>
                    <el-button type="primary" @click="onAdd" size="small">添加</el-button>
                </div>
            </div>

            <!-- 列表 -->
            <el-table
                    v-loading="isGettingList"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    align="center"
                    border
                    :data="tableData">
                <el-table-column align="center" prop="id" label="ID"></el-table-column>
                <el-table-column align="center" prop="key" label="KEY"></el-table-column>
                <el-table-column align="center" prop="increment" label="步长"></el-table-column>
                <el-table-column align="center" prop="memoryCapacity" label="内存容量"></el-table-column>
                <el-table-column align="center" prop="reloadThreshold" label="阈值"></el-table-column>
                <el-table-column align="center" prop="initialValue" label="初始值"></el-table-column>
                <el-table-column align="center" prop="prefix" label="前缀"></el-table-column>
                <el-table-column align="center" prop="digits" label="固定位数"></el-table-column>
                <el-table-column align="center" prop="resetRule" label="复位规则"></el-table-column>
                <el-table-column align="center" prop="status" label="状态">
                    <template slot-scope="scope">
                        {{scope.row.status | getStatus}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="350">
                    <template slot-scope="scope">
                        <el-button @click="onEdit(scope.row)" type="primary" size="small">编辑</el-button>
                        <template v-if="scope.row.status === 0">
                            <el-button @click="handleClickStopOrStart(scope.row,0)" type="success" size="small">启动
                            </el-button>
                        </template>
                        <template v-if="scope.row.status === 1">
                            <el-button @click="handleClickStopOrStart(scope.row,1)" type="danger" size="small">停止
                            </el-button>
                        </template>
                        <!--                        <el-button @click="onClickInitial(scope.row)" :disabled="scope.row.status === 1" type="warning"-->
                        <!--                                   size="small">初始值-->
                        <!--                        </el-button>-->
                        <el-button @click="onClickMonitor(scope.row)" :disabled="scope.row.status === 0" type="info"
                                   size="small">监控
                        </el-button>
                        <el-button @click="onClickTryIt(scope.row)" type="warning"
                                   size="small">try it
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                    align="right"
                    layout="total, prev, pager, next, jumper"
                    :total="total"
                    :current-page="params.page"
                    :page-size="params.pageSize"
                    @current-change="onChangePage"
            ></el-pagination>

            <!-- 添加修改 -->
            <el-dialog :title="isEdit ? '编辑' : '添加'" :visible.sync="isAddOrEdit">
                <el-form :label-position="right" label-width="100px" :model="formParams" :rules="formRules"
                         ref="ruleForm">
                    <el-form-item label="KEY：" prop="key" ref="key">
                        <el-col :span="8">
                            <el-input v-model="formParams.key"
                                      placeholder="请输入KEY"
                                      :disabled="isEdit ? true : false"
                                      clearable
                                      maxlength="18">
                            </el-input>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="自增步长：" prop="increment" clearable ref="increment">
                        <el-input-number v-model="formParams.increment"
                                         controls-position="right"
                                         placeholder="请输入自增步长"
                                         @change="handleIncrementChange"
                                         :min="1"
                                         maxlength="50">
                        </el-input-number>
                    </el-form-item>

                    <el-form-item label="内存容量：" prop="memoryCapacity" clearable ref="memoryCapacity">
                        <el-input-number v-model="formParams.memoryCapacity"
                                         controls-position="right"
                                         placeholder="请输入内存容量"
                                         @change="handleMemoryCapacityChange"
                                         :min="1"
                                         maxlength="50">
                        </el-input-number>
                    </el-form-item>

                    <el-form-item label="加载阈值：" prop="reloadThreshold" clearable ref="reloadThreshold">
                        <el-input-number v-model="formParams.reloadThreshold"
                                         controls-position="right"
                                         placeholder="请输入内存加载阈值"
                                         @change="handleReloadThresholdChange"
                                         :min="0" :max="100"
                                         maxlength="50">
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="初始值：" prop="initialValue" clearable ref="initialValue">
                        <el-input-number v-model="formParams.initialValue"
                                         controls-position="right"
                                         placeholder="请输入初始值"
                                         :disabled="isEditInitial ? false : true"
                                         @change="handleInitialValueChange"
                                         :min="1"
                                         maxlength="50">
                        </el-input-number>
                        <template v-if="!isEditInitial">
                            停止后可编辑
                        </template>
                    </el-form-item>
                    <el-form-item label="KEY前缀：" prop="prefix" clearable ref="prefix">
                        <el-col :span="8">
                            <el-input v-model="formParams.prefix"
                                      placeholder="请输入KEY前缀"
                                      maxlength="50"></el-input>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="固定位数：" prop="digits" clearable ref="digits">
                        <el-input-number v-model="formParams.digits"
                                         controls-position="right"
                                         placeholder="请输入位数"
                                         @change="handleDigitsChange"
                                         :min="0"
                                         maxlength="50">
                        </el-input-number>
                    </el-form-item>

                    <el-form-item label="复位规则：" prop="resetRule" clearable ref="resetRule">
                        <el-select v-model="formParams.resetRule" clearable placeholder="请选择">
                            <el-option
                                    v-for="item in resetRuleOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="isAddOrEdit = false">取 消</el-button>
                    <el-button type="primary" :disabled="isDisabled" @click="onSubmit('ruleForm')">确 定</el-button>
                </div>
            </el-dialog>

            <!--            <el-dialog title='设置初始值' :visible.sync="isEditInitial">-->
            <!--                <el-form :label-position="right" label-width="100px" :rules="initialRules" :model="initialParams" ref="initialForm">-->
            <!--                    <el-form-item label="初始值：" prop="initial" ref="initial">-->
            <!--                        <el-col :span="8">-->
            <!--                            <el-input v-model="initialParams.initial"-->
            <!--                                      placeholder="请输入初始值"-->
            <!--                                      clearable-->
            <!--                                      maxlength="18"></el-input>-->
            <!--                        </el-col>-->
            <!--                    </el-form-item>-->
            <!--                </el-form>-->
            <!--                <div slot="footer" class="dialog-footer">-->
            <!--                    <el-button @click="isEditInitial = false">取 消</el-button>-->
            <!--                    <el-button type="primary" :diable="isInitialDisabled" @click="handleClickInitial('initialForm')">确-->
            <!--                        定-->
            <!--                    </el-button>-->
            <!--                </div>-->
            <!--            </el-dialog>-->

            <el-dialog title='KEY内存可用量' :visible.sync="isMonitor" @close='closeMonitor'>
                <div id="monitorChart" :style="{width: '100%', height: '350px'}"></div>
            </el-dialog>
        </div>
    </template>
</div>
<script th:inline="javascript">
    // const host=[[${host}]];
    const host = "127.0.0.1:6082";

    //启动接口
    const runApi = "http://" + host + "/manage/rule/run?key=";
    //停止接口
    const stopApi = "http://" + host + "/manage/rule/stop?key=";
    //获取数据列表接口
    const listApi = "http://" + host + "/manage/rule/list";
    //获取详情接口
    const detailApi = "http://" + host + "/manage/rule/detail?key=";
    //创建接口
    const addApi = "http://" + host + "/manage/rule/add";
    //更新接口
    const updateApi = "http://" + host + "/manage/rule/update";
    //初始化接口
    const initialApi = "http://" + host + "/manage/rule/initial";
    //查询缓冲区图接口
    const bufferChartApi = "http://" + host + "/chart/buffer/used?key=";
    //tryit接口
    const tryitApi = "http://" + host + "/manage/rule/tryit?key=";
    var Main = {
        created() {
            this.getList();
        },
        filters: {
            // 转换状态编码
            getStatus(value) {
                switch (value) {
                    case 1:
                        return '进行中';
                    case 0:
                        return '停止';
                    default:
                        return '';
                }
            }
        },
        methods: {
            //调用启动或停止（0、启动 1、停止）
            handleClickStopOrStart(row, val) {
                const that = this;
                let url = val === 0 ? runApi : stopApi;
                let optMsg = val === 0 ? "启动" : "停止";
                axios.get(url + row.key, {}).then(function (res) {
                    switch (res.data.code) {
                        case 0:
                            that.$message.success(optMsg + "成功！");
                            that.getList();
                            break;
                        default:
                            that.$message.warning(optMsg + "失败！");
                            break;
                    }
                }).catch(function (error) {
                    console.log(error)
                    that.$message.warning("操作失败，请稍后再试");
                });
            },
            //获取数据列表
            getList() {
                const that = this;
                const params = Object.assign(
                    {},
                    that.params
                );
                that.isGettingList = true
                axios.get(listApi, {params}).then(function (responseResult) {
                    let data = responseResult.data.data
                    console.log(data)
                    that.tableData = data.list
                    that.total = data.count;
                    that.params.page = data.page;
                    that.params.pageSize = data.pageSize;
                    that.isGettingList = false
                }).catch(function (error) {
                    that.isGettingList = false
                    that.$message.warning("查询失败，请稍后再试");
                });
            },
            // 修改页码
            onChangePage(page) {
                this.params.page = page || 1;
                this.getList();
            },
            //重置参数
            resetFormParams() {
                const that = this;
                that.$refs.pageForm && that.$refs.pageForm.resetFields();
                that.formParams = {
                    key: '',
                    memoryCapacity: '500',
                    reloadThreshold: '100',
                    increment: 1,
                    prefix: '',
                    digits: 0,
                    resetRule: '',
                    status: 0,
                    initialValue: 1
                };
            },
            getDetail(key) {
                let that = this;
                axios.get(detailApi + key, {})
                    .then(res => {
                        if (res.data.code === 0) {
                            that.formParams = Object.assign({}, that.formParams, res.data.data);
                        } else {
                            that.$message.warning('获取信息失败');
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            // 搜索
            onSearch() {
                this.params.page = 1;
                this.getList();
            },
            // 点击创建按钮
            onAdd() {
                this.isAddOrEdit = true;
                this.isEdit = false;
                this.isEditInitial = true;
                this.resetFormParams();
            },
            // 点击编辑按钮
            onEdit(row) {
                const that = this;
                that.isAddOrEdit = true;
                that.isEdit = true;
                if (row.status === 0) {
                    that.isEditInitial = true;
                } else {
                    that.isEditInitial = false;
                }
                that.getDetail(row.key);
            },
            //添加或编辑提交按钮
            onSubmit(ruleForm) {
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        this.isDisabled = true;
                        if (this.isEdit) {
                            // 编辑接口
                            console.log(this.formParams)
                            this.invokeUpdate()
                        } else {
                            // 添加接口
                            console.log(this.formParams)
                            this.invokeCreate()
                        }
                    } else {
                        this.isDisabled = false;
                        return this.$message.warning('请确认参数');
                    }
                });
            },
            // 调用创建方法
            invokeCreate() {
                let that = this;
                axios.post(addApi, that.formParams)
                    .then(res => {
                        switch (res.data.code) {
                            case 0 :
                                that.$message.success('创建成功！');
                                that.isAddOrEdit = false;
                                that.getList();
                                break;
                            default:
                                that.$message.warning('创建失败,请稍后再试！');
                                break;
                        }
                        that.isDisabled = false;
                    })
                    .catch(error => {
                        that.isLoading = true;
                        that.isDisabled = false;
                        console.log(error);
                    });
            },
            // 调用修改方法
            invokeUpdate() {
                let that = this;
                axios.post(updateApi, that.formParams)
                    .then(res => {
                        switch (res.data.code) {
                            case 0 :
                                that.$message.success('修改成功！');
                                that.isAddOrEdit = false;
                                that.getList();
                                break;
                            default:
                                that.$message.warning('修改失败,请稍后再试！');
                                break;
                        }
                        that.isDisabled = false;
                    })
                    .catch(error => {
                        that.isLoading = true;
                        that.isDisabled = false;
                        console.log(error);
                    });
            },
            //修改内存加载阈值
            handleReloadThresholdChange(value) {
                this.formParams.reloadThreshold = value;
            },
            //修改初始值
            handleInitialValueChange(value) {
                this.formParams.initialValue = value;
            },
            //修改步长
            handleIncrementChange(value) {
                this.formParams.increment = value;
            },
            //修改容量
            handleMemoryCapacityChange(value) {
                this.formParams.memoryCapacity = value;
            },
            //修改位数
            handleDigitsChange(value) {
                this.formParams.digits = value;
            },
            // //点击初始化按钮
            // onClickInitial(row) {
            //     const that = this;
            //     that.isEditInitial = true;
            //     that.initialParams.key = row.key
            // },
            //调用初始化接口
            // handleClickInitial(initialForm) {
            //     const that = this;
            //     this.$refs[initialForm].validate((valid) => {
            //         if (valid) {
            //             this.isInitialDisabled = true;
            //             axios.get(initialApi + "?key=" + that.initialParams.key + "&initial=" + that.initialParams.initial, {}).then(function (res) {
            //                 switch (res.data.code) {
            //                     case 0:
            //                         that.$message.success("初始值设置完成！");
            //                         that.isEditInitial = false;
            //                         that.getList();
            //                         break;
            //                     default:
            //                         that.$message.warning("初始值设置失败！");
            //                         break;
            //                 }
            //             }).catch(function (error) {
            //                 that.isInitialDisabled = false;
            //                 that.$message.warning("操作失败，请稍后再试");
            //             });
            //         } else {
            //             that.isInitialDisabled = false;
            //             return that.$message.warning('请确认参数');
            //         }
            //     });
            // },


            drawMonitor(key) {
                let that = this;
                axios.get(bufferChartApi + key, {})
                    .then(res => {
                        if (res.data.code == 0) {
                            that.monitorData = Object.assign({}, that.monitorData, res.data.data);

                            // 基于准备好的dom，初始化echarts实例
                            let myChart = echarts.init(document.getElementById('monitorChart'))
                            // 绘制图表
                            //const that = this;
                            let series = [];
                            let legends = []
                            that.monitorData.data.forEach(data => {
                                legends = legends.concat(data.name)
                                series = series.concat({
                                    name: data.name,
                                    type: 'line',
                                    showSymbol: false,
                                    hoverAnimation: false,
                                    data: data.data
                                })
                            })
                            let time = []
                            that.monitorData.time.forEach(data => {
                                let oldTime = (new Date(data)).getTime();
                                let curTime = new Date(oldTime).getHours() + ":" + new Date(oldTime).getMinutes() + ":" + new Date(oldTime).getSeconds();
                                time = time.concat(curTime);
                            })

                            console.log(series);

                            myChart.setOption({
                                title: {},
                                legend: {
                                    data: legends
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        animation: false
                                    }
                                },
                                xAxis: {
                                    type: 'category',
                                    data: time,
                                },
                                yAxis: {
                                    type: 'value',
                                    boundaryGap: [0, '100%'],
                                    splitLine: {
                                        show: false
                                    }
                                },
                                series: series
                            });
                        } else {
                            that.$message.warning('获取信息失败');
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });

            },
            //点击监控按钮
            onClickMonitor(row) {
                const that = this;
                that.isMonitor = true;
                that.$nextTick(function () {
                    that.drawMonitor(row.key);
                });
            },
            //点击监控按钮
            onClickTryIt(row) {
                const that = this;
                axios.get(tryitApi + row.key, {}).then(function (res) {
                    switch (res.data.code) {
                        case 0:
                            that.$message.success("ID模拟效果：" + res.data.data);
                            break;
                        default:
                            that.$message.warning("操作失败！");
                            break;
                    }
                }).catch(function (error) {
                    console.log(error)
                    that.$message.warning("操作失败，请稍后再试");
                });
            },
            closeMonitor(row) {
                const that = this;
                let myChart = echarts.init(document.getElementById('monitorChart'))
                myChart.clear();
                that.isMonitor = false;
            }
        },
        data() {
            return {
                tableData: [],
                isGettingList: false,
                total: 0,
                isAddOrEdit: false,
                isEditInitial: false,
                params: {
                    key: null,//key
                    status: null,//状态
                    page: 1, // 页码
                    pageSize: 10, // 每页条数
                },
                isEdit: false,
                isDisabled: false,
                isInitialDisabled: false,
                isMonitor: false,
                formParams: {
                    key: '',
                    memoryCapacity: '',
                    reloadThreshold: '100',
                    increment: 1,
                    prefix: '',
                    digits: '',
                    resetRule: '',
                    status: 0,
                    initialValue: 1
                },
                monitorData: {},
                // initialParams: {
                //     key: '',
                //     initial: ''
                // },
                // 表单校验规则
                formRules: {
                    key: [
                        {
                            required: true,
                            message: '请输入KEY',
                            trigger: 'blur'
                        }
                    ],
                    increment: [
                        {
                            required: true,
                            message: '请输入步长',
                            trigger: 'blur'
                        }
                    ],
                    memoryCapacity: [
                        {
                            required: true,
                            message: '请输入内存容量',
                            trigger: 'blur'
                        }
                    ],
                    reloadThreshold: [
                        {
                            required: true,
                            message: '请输入内存加载阈值',
                            trigger: 'blur'
                        }
                    ],
                    initialValue: [
                        {
                            required: true,
                            message: '请输入初始值',
                            trigger: 'blur'
                        }
                    ],
                    digits: [
                        {required: false}
                    ],
                    prefix: [
                        {required: false}
                    ],
                    resetRule: [
                        {required: false}
                    ]
                },
                // initialRules: {
                //     initial: [
                //         {
                //             required: true,
                //             message: '请输入初始值',
                //             trigger: 'blur'
                //         }
                //     ]
                // },
                statusOptions: [
                    {
                        value: null,
                        label: '全部'
                    },
                    {
                        value: 1,
                        label: '进行中'
                    },
                    {
                        value: 0,
                        label: '停止'
                    }],
                resetRuleOptions: [{
                    value: 'DD',
                    label: '每天'
                }, {
                    value: 'MM',
                    label: '每月'
                }, {
                    value: 'YY',
                    label: '每年'
                }]
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
<style lang="scss">
    .filter {
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 10px;
        border: 1px solid #e1e1e1;
    }

    .filter-btns {
        text-align: left;
    }

    .filter-select {

    .el-input {
        width: 160px;
    }

    }
    .add_from-item2 {
        display: flex;


    .el-form-item__content {
        /*display: flex;*/
    }

    }
</style>
</body>
</html>